/* 
    Document   : tiwulfx
    Created on : Sep 23, 2012, 9:49:47 PM
    Author     : amrullah
    Description:
        Purpose of the stylesheet follows.
*/

#hiddenSplitter {
    -fx-background-color: null;
    /*-fx-padding: 10px;*/
}

#hiddenSplitter *.split-pane-divider,
#hiddenSplitter *.vertical-grabber, 
#hiddenSplitter *.horizontal-grabber {
    -fx-background-color: null;
    -fx-border-color: null;
    -fx-padding: 5px;
}

.propLabel{
    -fx-text-fill: #888888;
    -fx-font: 0.9em "Arial";
    /*-fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );*/
    /*    -fx-font-size: 11px;
        -fx-font-weight: bold;
        -fx-text-fill: #333333;*/
    /*-fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );*/
}

.valueLabel {
    -fx-font-size: 11px;
    /*-fx-font-weight: bold;*/
    -fx-text-fill: #333333;
}

.table-view .column-header{
    -fx-font: 1em "Arial";
}

.table-view:focused {
    /*remove focus glow*/
    -fx-background-insets: 0, 0, 1, 2; 
}

.table-row-cell:changed {
    -fx-background-color: red, yellow;
    -fx-background-insets: -1 0 0 0, 0 0 1 0;
}

.table-row-cell:empty {
    -fx-background-color: null;
}
 
.table-row-cell:empty .table-cell {
    -fx-border-width: 0px;
}

.searchMenuItemLabel {
    -fx-font-family: "Helvetica";
    -fx-font-weight: bold;
    -fx-text-fill: #333333;
    -fx-effect: dropshadow( one-pass-box , white , 0, 0.0 , 0 , 1 );
}

.table-toolbar {
    -fx-background-insets: 0, 1 1 0 1;
    -fx-padding: 0 3 0 0;
    -fx-spacing: 0;
}

.table-footer {
    -fx-background: derive(-fx-base,-30%);
    -fx-background-color:
        linear-gradient(to bottom, derive(-fx-base,-30%), derive(-fx-base,-60%)),
        linear-gradient(to bottom, derive(-fx-base,65%) 2%, derive(-fx-base,-20%) 95%);
    -fx-background-insets: 0, 0 1 1 1;
    -fx-background-radius: 0, 0 ;
    -fx-padding: 0.416667em 0.833em 0.416667em 0.833em;
    -fx-spacing: 0.333em;
    -fx-padding: 4 10 2 10;
    -fx-border-color: -fx-box-border;
    -fx-border-insets: -1 0 0 0;
}

.table-footer .label {
    -fx-font: 0.9em "Arial";
    -fx-text-fill: #333333;
}

.table-menu {
    -fx-background-color: transparent, transparent;
    -fx-background-radius: 10;
    -fx-background-insets: -2 -2 0 -2, -1 -1 1 -1;
    -fx-padding: 0;
    -fx-alignment: center;
    -fx-content-display: center;
    -fx-text-alignment: center;
}
.table-menu:hover {
    -fx-background-color: derive(-fx-background, -25%), derive(-fx-background, 25%);
}
.table-menu:focused {
    -fx-background-color: -fx-focus-color, -fx-background;
}
.table-menu .arrow-button {
    -fx-padding:0;
}
.table-menu .label {
    -fx-padding:-2 0 0 0;
}
.table-menu .arrow {
    -fx-shape: null;  
    -fx-padding:0;
}

.scroll-pane {
    -fx-background-color: null;
}

.label-separator .line {
    -fx-border-color: derive(-fx-background, -25%) -fx-background derive(-fx-background, 40%) -fx-background;
}

.label-separator .label {
    -fx-background-color: 
        #090a0c,
        linear-gradient(#38424b 0%, #1f2429 20%, #191d22 100%),
        linear-gradient(#20262b, #191d22),
        radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0));
    -fx-background-radius: 5,4,3,5;
    -fx-background-insets: 0,1,2,0;
    -fx-text-fill: white;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
    -fx-font-family: "Arial";
    -fx-text-fill: linear-gradient(white, #d0d0d0);
    -fx-font-size: 12px;
    -fx-padding: 2 10;
}

/* ============ TOGGLE BUTTON =============================================== */
.pill-button {
    -fx-background-radius: 4, 4, 3, 2;
    -fx-padding: 3 6 3 6;
}

.pill-button:disabled {
    -fx-opacity: 1.0;
    -fx-text-fill: #888888;
}

.pill-button:focused {
    -fx-background-color:
        rgba(23,134,248,0.2),
        -fx-focus-color,
        -fx-inner-border,
        -fx-body-color;
}
.pill-button:selected Text {
    -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.9) , 2, 0.0 , 0 , 1 );
}
.pill-button:selected {
    -fx-background-color:
        -fx-shadow-highlight-color,
        linear-gradient( to bottom, derive(-fx-color,-90%) 0%, derive(-fx-color,-60%) 100% ),        
        linear-gradient( to bottom, derive(-fx-color,-60%) 0%, derive(-fx-color,-35%) 50%, derive(-fx-color,-30%) 98%, derive(-fx-color,-50%) 100% ),    
        linear-gradient( to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100% );
    -fx-background-insets: 0 0 -1 0, 0, 1, 1;
    /* TODO: -fx-text-fill should be derived */
    -fx-text-fill: -fx-light-text-color;
}
.pill-button:selected:focused {
    -fx-background-color:
        rgba(23,134,248,0.2),
        -fx-focus-color,        
        linear-gradient( to bottom, derive(-fx-color,-60%) 0%, derive(-fx-color,-35%) 50%, derive(-fx-color,-30%) 98%, derive(-fx-color,-50%) 100% ),    
        linear-gradient( to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100% );
    -fx-background-insets: -1.4, 0, 1, 1;
}
.pill-button-left {
    -fx-background-radius: 3 0 0 3;
    -fx-background-insets: 0 0 -1 0, 0, 1 0 1 1, 2 0 2 2;
    -fx-border-color: transparent -fx-outer-border transparent transparent;
    -fx-border-insets: 6 0 5 0;
    -fx-padding: -2 6 -2 6;
}
.pill-button-left:focused {
    -fx-background-radius: 3 0 0 3;
    -fx-background-insets: -1.4 0 -1.4 -1.4, 0 0 0 0, 1, 2;
    -fx-border-color: transparent;
}
.pill-button-left:selected {
    -fx-border-color: transparent;
}
.pill-button-left:selected:focused {
    -fx-border-color: transparent;
}
.pill-button-center {
    -fx-background-radius: 0;
    -fx-background-insets: 0 0 -1 0, 0, 1 0 1 0, 2 0 2 0;
    -fx-border-color: transparent -fx-outer-border transparent transparent;
    -fx-border-insets: 6 0 5 0;
    -fx-padding: -2 6 -2 6;
}

.pill-button-center:focused {
    -fx-background-radius: 0;
    -fx-background-insets: -1.4 0 -1.4 -1, 0 0 0 -1, 1 1 1 0, 2 2 2 1;
    -fx-border-color: transparent;
}
.pill-button-center:selected {
    -fx-background-insets: -1.4 0 -1.4 -1, 0 0 0 -1, 1 1 1 0, 1 1 1 0;
    -fx-border-color: transparent;
}
.pill-button-center:selected:focused {
    -fx-background-insets: -1.4 0 -1.4 -1, 0 0 0 -1, 1 1 1 0, 1 1 1 0;
    -fx-border-color: transparent;
}
.pill-button-right {
    -fx-background-radius: 0 3 3 0;
    -fx-background-insets: 0 0 -1 0, 0, 1 1 1 0, 2 2 2 0;
    -fx-padding: 5 6 4 6;
}
.pill-button-right:focused {
    -fx-background-radius: 0 3 3 0;
    -fx-background-insets: -1.4 -1.4 -1.4 -1, 0 0 0 -1, 1 1 1 0, 2 2 2 1;
}
.pill-button-right:selected {
    -fx-background-insets: -1.4 -1.4 -1.4 -1, 0 0 0 -1, 1 1 1 0, 1 1 1 0;
}
.pill-button-right:selected:focused {
    -fx-background-insets: -1.4 -1.4 -1.4 -1, 0 0 0 -1, 1 1 1 0, 1 1 1 0;
}

.flat-button {
    -fx-background-color: null;
    -fx-background-radius: 0;
    -fx-background-insets: 0 1 0 1;
    -fx-padding: 3 5;
    -fx-border-color: transparent #6e737d transparent rgba(255,255,255,0.3) , transparent rgba(255,255,255,0.3) transparent transparent;
    -fx-border-insets: 0;
}

.flat-button:hover {
    -fx-background-color: rgba(255,255,255,0.4);
    -fx-background-insets: 2 1 0 1;
}

.flat-button:focused {
    -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-border-color: -fx-focus-color;
    -fx-border-width: 1.4;
}

.flat-button:armed {
    -fx-color: -fx-pressed-base;
}

.combo-page:disabled {
    -fx-opacity: 1.0;
}

.combo-page {
    -fx-background-radius: 0;
    -fx-background-insets: 0 0 -1 0, 0, 1 0 1 0, 2 0 2 0;
    -fx-border-color: transparent -fx-outer-border transparent transparent;
    -fx-border-insets: 6 0 5 0;
    -fx-padding: -4 1 -3 1;
    -fx-font: 0.9em "Arial";
}

.combo-page:focused {
    -fx-background-color:
        rgba(23,134,248,0.2),
        -fx-focus-color,
        -fx-inner-border,
        -fx-body-color;
    /*-fx-border-color: transparent;*/
}

.combo-box:editable .arrow-button {
    -fx-background-color:
        derive(-fx-color, -25.4%),
        -fx-inner-border,
        -fx-body-color;
    -fx-background-radius: 0 3 3 0, 0 3 3 0, 0 2 2 0, 0 1 1 0;
    -fx-padding: 1 5 0 5;
}

.search-menu-item {
    -fx-background-color: 
        linear-gradient(#f2f2f2, #d6d6d6),
        linear-gradient(#fcfcfc 0%, #d9d9d9 20%, #d6d6d6 100%),
        linear-gradient(#dddddd 0%, #f6f6f6 50%);
    -fx-background-radius: 8,7,6;
    -fx-background-insets: 0,1,2;
    -fx-text-fill: black;
    -fx-font-size: 0.9em;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}

.menu-item:focused .searchMenuItem .check-box {
    -fx-text-fill: #333333;
}

.search-button {
    -fx-background-radius: 0;
    -fx-padding: 1;
}

.lookup-field {
    -fx-skin: "com.panemu.tiwulfx.control.skin.LookupFieldSkin";
    -fx-background-color: transparent;
}

.lookup-field:focused {
    -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background;
    -fx-background-insets: -0.4, 1, 2;
    -fx-background-radius: 3.4, 2, 2;
    -fx-prompt-text-fill: transparent;
}

.lookup-field .button {
    -fx-background-color: derive(-fx-color, -25.4%), -fx-inner-border, -fx-body-color;
    -fx-background-insets: 1, 2, 3;
    -fx-background-radius: 0 3 3 0 , 0 2 2 0, 0 2 2 0;
    -fx-padding: 1 3 1 3;
}

.lookup-field .text-field {
    -fx-padding: 3 20 3 5;
}

.lookup-field .text-field:focused {
    -fx-background-color: transparent, -fx-text-box-border, -fx-control-inner-background;
}


.date-field {
    -fx-skin: "com.panemu.tiwulfx.control.skin.DateFieldSkin";
    -fx-background-color: transparent;
}

.date-field .button {
    -fx-background-color: derive(-fx-color, -25.4%), -fx-inner-border, -fx-body-color;
    -fx-background-insets: 1, 2, 3;
    -fx-background-radius: 0 3 3 0 , 0 2 2 0, 0 2 2 0;
    -fx-padding: 1 3 1 3;
}

.date-field:focused {
    -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background;
    -fx-background-insets: -0.4, 1, 2;
    -fx-background-radius: 3.4, 2, 2;
    -fx-prompt-text-fill: transparent;
}


.date-field .text-field {
    -fx-padding: 3 20 3 5;
}

.date-field .text-field:focused {
    -fx-background-color: transparent, -fx-text-box-border, -fx-control-inner-background;
}

.form-control {
    /*    -fx-border-color : red;
        -fx-border-width: 2px;
        -fx-padding: 2;*/
}

.dialog-root {
    -fx-border-insets: 0 10 10 0;
    -fx-border-width: 1;
    -fx-border-radius: 5 5 0 0;
    -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.2), 11, 0.0, 3, 3);
    -fx-border-color: #a3a3a3;
}

.dialog .header {
    -fx-background-radius: 5 5 0 0;
    -fx-background-insets: -1 -1 0 -1;
    -fx-background-color: linear-gradient(#595959, #474747 37%, #343434);
    -fx-padding: 5 68 5 68;
    -fx-alignment: center;
}

.dialog .title {
    -fx-text-fill: #ebebeb;
    -fx-font-weight: bold;

}

.dialog .button-panel {
    -fx-padding: 10;
    -fx-spacing: 10;
    -fx-background-color: linear-gradient(#e2e2e2,#e2e2e2,#eeeeee);
    -fx-alignment: center;
}

.dialog .message-panel {
    -fx-padding: 50 10;
    -fx-background-color: white;
    -fx-alignment: center;
}

.error-popup {
    -fx-padding : 4 5 ;
    -fx-background-color: #f57900, #fff79c;
    -fx-background-insets: 0, 1;
    -fx-background-radius: 0 0 4 4, 0 0 3 3;
    -fx-border-width: 2;
}

.error-popup .label {
    -fx-font-size: 11px;
}

/* The main calendar pane */
.calendar {

}

/* The calendar header, which contains the navigation elements. */
.calendar-header
{
    -fx-background-color: linear-gradient(to bottom, derive(-fx-base,-70%), derive(-fx-base,-90%));
    -fx-padding: 0.5em;
    /* -fx-background-radius: 10;*/
}

/* The calendar footer, which contains the today button. It is only visible when the today button is shown */
.calendar-footer
{
    -fx-background-color: linear-gradient(to top, derive(-fx-base,-70%), derive(-fx-base,-90%));
    -fx-padding: 0.2em;
}

/* The 3 different panes, which show the month, the year, and the decades */
.calendar-month-view, .calendar-year-view, .calendar-decades-view
{
    -fx-background-color: linear-gradient(to bottom, derive(-fx-base,80%), derive(-fx-base,40%));
    -fx-padding: 0;
}

/* The usual button which either display the day of the current month, or the month in the year view, or the year in the decades view */
.calendar-cell-current-month, .calendar-year-button, .calendar-month-button {
    -fx-background-color: null;
    -fx-background-radius: 0;
    -fx-background-insets: 0, 0, 0, 0;
    -fx-cursor: hand;
    -fx-padding: 0.7em;
    -fx-font-weight: bold;
    -fx-background-radius: 8;
}

/* The hover state of the buttons */
.calendar-cell-current-month:hover, .calendar-year-button:hover, .calendar-month-button:hover {
    -fx-background-color: -fx-cell-hover-color;
}

/* The day buttons for the previous and next month. */
.calendar-cell-other-month {
    -fx-background-color: null;
    -fx-background-radius: 0;
    -fx-background-insets: 0, 0, 0, 0;
    -fx-opacity: 0.7;
    -fx-cursor: hand;
    -fx-padding: 0.7em;
    -fx-background-radius: 8;
}

/* The hover state of this button. */
.calendar-cell-other-month:hover {
    -fx-background-color: -fx-cell-hover-color;
}

/* The button which shows the current day. */
.calendar-cell-today {
    -fx-background-color: -fx-accent;
}

/* The buttons in the header and the footer */
.calendar-navigation-button, .calendar-navigation-title, .calendar-today-button {
    -fx-background-color: null;
    -fx-cursor: hand;
    -fx-text-fill: white;
}

/* don't make the title button transparent, when it is disabled in the decades view */
.calendar-navigation-title:disabled {
    -fx-opacity: 1;
}

/* The arrow for navigation. SVG is used for it. */
.calendar-navigation-arrow {
    /*padding determines the size of the arrow; This should match the design size in the SVG */
    -fx-padding: 4 3.5 4 3.5;
    -fx-padding: 0.333333em 0.333333em 0.333333em 0.333333em; /* 2 3.5 2 3.5 */
    -fx-shape: "M 100 100 L 300 100 L 200 300 z";
    -fx-background-color: #ffffff;
}

/* The cell which contain the week day names */
.calendar-weekdays {
    -fx-background-color: -fx-body-color;
    -fx-padding: 3px;
}

.calendar-week-number {
    -fx-font-size: 0.8em;
    -fx-padding: 4px;
}
